<template>
  <div class="lou">
    <div class="lou-header">
      <span @click="$router.push('/index')">
        <van-icon name="arrow-left" />
      </span>
      <div>楼市圈</div>
      <span></span>
    </div>
    <div class="lou-main">
      <div v-for="(item,index) in state.louList" :key="index">
        <div class="main-1">
          <div class="img">
            <img :src="item.img" alt />
          </div>
          <h4>{{item.name}}</h4>
        </div>
        <div class="main-2">
          <h3>{{item.yue}}</h3>
          <span>{{item.title}}</span>
        </div>
        <div class="main-3">
          <span>{{item.times}}</span>
          <div class="list">
            <!-- <li v-for="(g,i) in item.children" :key="i"> -->
            <img :src="item.imgs" alt />
            <!-- </li> -->
          </div>
        </div>
        <p @click="Delete(item)">删除</p>
        <van-dialog v-model="state.show" show-cancel-button>
          <span>是否确定退出</span>
        </van-dialog>
      </div>
      <div class="add" @click="$router.push('/sendLou')">+</div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { Dialog } from "vant";

// 全局注册
import axios from "../../axios/index.js";
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    let state = reactive({
      louList: [],
      show: false
    });
    //获取数据
    const getLou = () => {
      axios.get("/loushi").then(res => {
        state.louList = res.data;
        let A = []; //按月份排序
        let B = []; //按天数排序
        let C=[]
        C=res.data.sort((a, b) => {
          return b.id - a.id
        });
        B = C.sort((a, b) => {
          return b.times.slice(3, 5) - a.times.slice(3, 5);
        });
        A = B.sort((a, b) => {
          return b.times.slice(0, 2) - a.times.slice(0, 2);
        });
      });
    };
    //调用函数
    getLou();

    //删除函数
    const Delete = item => {
      Dialog.confirm({
        title: "提示",
        message: "是否确定删除"
      })
        .then(() => {
          axios.delete(`/loushidel/${item.id}`).then(res => {
            getLou();
            console.log(res);
          });
          getLou();
        })
        .catch(() => {
          // on cancel
        });
    };
    return {
      state,
      Delete
    };
  }
});
</script>
<style lang="scss" scoped>
.lou {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.lou-header {
  height: 50px;
  font-size: 18px;
  background: #1887f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  span {
    width: 20%;
    margin-left: 10px;
  }
  img {
    margin-right: 10px;
  }
}
.lou-main {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: scroll;
  .main-1 {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 20px;
    .img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    h4 {
      margin-left: 10px;
    }
  }
  .main-2 {
    display: flex;
    flex-wrap: wrap;
    height: 30px;
    align-items: center;
    h3 {
      margin-left: 20px;
    }
    span {
      margin-left: 20px;
    }
  }
  .main-3 {
    display: flex;
    flex-wrap: wrap;
    span {
      font-size: 14px;
      margin-left: 20px;
    }
    .list {
      margin-left: 10px;
    }
    img {
      width: 260px;
      height: 200px;
    }
    .list {
      width: 70%;
      display: flex;
      justify-content: center;
      li {
        width: 100%;
        margin-left: 5px;
        img {
          width: 100%;
          height: 150px;
        }
      }
    }
  }
  p {
    font-size: 12px;
    color: #2e8af3;
    width: 45%;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    padding-left: 120px;
    margin-left: 65px;
  }
  .add {
    position: fixed;
    bottom: 4%;
    right: 5%;
    width: 70px;
    line-height: 70px;
    text-align: center;
    background: #0272f0;
    color: white;
    font-size: 30px;
    border-radius: 50%;
  }
}
</style>